import React, { useEffect, useState, useRef } from "react";
import { history, connect } from 'umi'
import { Space, Form, Popover, Button, notification, Row, Col } from 'antd'
import FormCondition from '@/components/FormCondition';
import SettingOpeational from '@/components/SettingOpeational'
import './index.less'
const Operational = (props) => {
  const { detail = {}, dispatch } = props
  const { id } = detail
  console.log(detail, 111111111111)
  const [form] = Form.useForm();
  const childRef = useRef(null)
  const [data, setData] = useState({
    informationCollectionFlag: '0'
  })
  const [defaultList, setDetaultList] = useState([])
  useEffect(() => {
    if (id) {
      fetchData()
    }
  }, [id])
  const handleSetting = () => {
    form.validateFields().then((values) => {
      let informationCollectionIdList = childRef.current.getInformationCollection()
      if (informationCollectionIdList.length === 0) {
        return notification.warning({
          message: '温馨提示',
          description: `请选择信息采集后保存`,
        });
      }
      else {
        dispatch({
          type: 'liveStreaming/fakeSaveGoodsMarketingInfo',
          payload: {
            goodsId: id,
            informationCollection: {
              ...values,
              informationCollectionId: informationCollectionIdList[0]
            }
          },
          callback: () => {
            fetchData()
          }
        })
      }
    })
  }
  const fetchData = () => {
    dispatch({
      type: 'liveStreaming/fetchGoodsMarketingInfo',
      payload: {
        goodsId: id
      },
      callback: (e) => {
        const { informationCollection = {} } = e
        const { informationCollectionId, informationCollectionTitle, informationCollectionRepeatFlag, informationCollectionRefGoodsAmount } = informationCollection
        if (informationCollectionId) {
          setDetaultList([{
            id: informationCollectionId,
            repeatFlag: informationCollectionRepeatFlag,
            recordAmount: informationCollectionRefGoodsAmount,
            title: informationCollectionTitle
          }])
        }
        form.setFieldsValue('informationCollectionFlag', informationCollection.informationCollectionFlag === '1' ? '1' : '0',)
        setData({ ...informationCollection, informationCollectionFlag: informationCollection.informationCollectionFlag === '1' ? '1' : '0', informationCollectionPage: 'pagePay' })
      }
    })
  }
  const { informationCollectionFlag } = data
  const formItems = [
    {
      label: '信息采集',
      name: 'informationCollectionFlag',
      type: 'radio',
      onChange: (e) => {
        setData({
          ...data,
          informationCollectionFlag: e.target.value,
        })

      },
      select: {
        1: '开启',
        0: '关闭',
      }
    },
    {
      type: 'noForm',
      visible: informationCollectionFlag === '1',
      formItem: (
        <SettingOpeational
          ref={childRef}
          defaultList={defaultList}
          onChange={(e = []) => {
            setData({
              ...data,
              informationCollectionId: e[0] ? e[0].id : ''
            })
          }}></SettingOpeational>
      ),
    },
    {
      label: '采集页面',
      name: 'informationCollectionPage',
      type: 'radio',
      // disabled: true,
      visible: informationCollectionFlag === '1',
      select: {
        'pagePay': <div>确认购买页 <Popover content={<img></img>}>
          <Button type='link'> 查看示例</Button></Popover></div>,
        'pageLive': <div>直播页<Popover content={<img></img>}>
          <Button type='link'> 查看示例</Button></Popover></div>,
      }
    },
  ]
  return (
    <Space direction={'vertical'} style={{ width: '100%' }}>
      <div className='commodity-manage-part'>
        <div className='commodity-part-title'>
          <div className='commodity-title-line'></div>
          <div className='commodity-part-title-word'>信息采集</div>
        </div>
      </div>
      <FormCondition form={form} formItems={formItems} initialValues={{ ...data }}></FormCondition>
      <Row className="Operational_btn">
        <Button type="primary" onClick={handleSetting}>保存</Button>
      </Row>

    </Space>
  );
};

export default connect(({ commodity, loading }) => ({
  loading: loading.effects['commodity/fakeDeleteOfflineGoods']
}))(Operational);
;
